<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑库存</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #FFEEF7;
      margin: 0;
      padding: 20px;
      color: #333;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .form-group {
      margin-bottom: 10px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
    }
    button:hover {
      background-color: #4CAF50;
    }
  </style>
</head>
<body>
<div class="container">
  <h2>编辑库存</h2>
  <form id="editInventoryForm">
    <div class="form-group">
      <label for="editProductID">产品ID:</label>
      <input type="text" id="editProductID" name="editProductID" required>
    </div>
    <div class="form-group">
      <label for="editQuantity">数量:</label>
      <input type="number" id="editQuantity" name="editQuantity" required>
    </div>
    <div class="form-group">
      <button type="button" onclick="updateInventory()">更新库存</button>
      <button type="button" onclick="window.history.back()">取消</button>
    </div>
  </form>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const productID = urlParams.get('id');
    if (productID) {
      fetchInventoryDetails(productID);
    } else {
      alert('未提供产品ID');
    }
  });

  function fetchInventoryDetails(productID) {
    fetch(`/api/inventory/${productID}`)
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(inventory => {
              document.getElementById('editProductID').value = inventory.productID;
              document.getElementById('editQuantity').value = inventory.stockQuantity;
              document.getElementById('editProductID').dataset.inventoryId = inventory.productID;
            })
            .catch(error => {
              console.error('Error fetching inventory details:', error);
              alert('获取库存详情失败: ' + error.message);
            });
  }

  function updateInventory() {
    const productID = document.getElementById('editProductID').value;
    const quantity = document.getElementById('editQuantity').value;
    const inventoryId = document.getElementById('editProductID').dataset.inventoryId;

    fetch(`/api/inventory/${inventoryId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ productID, stockQuantity: quantity }),
    })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(data => {
              console.log('Success:', data);
              alert('库存更新成功');
              window.history.back();
            })
            .catch(error => {
              console.error('Error:', error);
              alert('库存更新失败: ' + error.message);
            });
  }
</script>

</body>
</html>